

import "./index.scss";
import { Layout, Menu } from 'antd';
import { connect } from "react-redux"
import { routerList } from "../../utils/router"
import { mbdata } from "../../mobx/data"
import { observer } from "mobx-react"
import { withRouter } from "react-router-dom";
import { useState, useEffect } from "react"

const { Sider } = Layout;
const { SubMenu } = Menu

// 动态侧边栏
function MyMenu({ collapsed, history, location }) {
    function handleItemClick(item) {
        history.push(item.key)

    }
    // 递归
    const renderMenuItem = (list) => {
        const { userInfo } = mbdata
        if (userInfo) {
            return list.map((l, i) => {
                if (l.children) {
                    if (userInfo.role * 1 < l.premission) {
                        return null
                    } else {
                        return (
                            <SubMenu key={l.path} icon={l.icon} title={l.text}>
                                {
                                    renderMenuItem(l.children)
                                }
                            </SubMenu>
                        )
                    }
                } else {
                    if (userInfo.role * 1 < l.premission) {
                        return null
                    } else {
                        return (
                            <Menu.Item key={l.path} icon={l.icon}>
                                {l.text}
                            </Menu.Item>
                        )
                    }
                }
            })
        } else {
            return null
        }
    }




    // var defaultOpenKeys;
    // const pathname = location.pathname;
    // const values = pathname.split("/")
    // defaultOpenKeys = ['/' + values[1] + "/" + values[2]]


    var [defaultOpenKeys, setDefaultOpenKeys] = useState('');
    var [openkey, setOpenkey] = useState('');
    const onOpenChange = (value) => {
        console.log(value)
        if (value.length == 0 || value.length == 1) {
            setOpenkey(value)
            return;
        }

        const lastOpen = value[value.length - 1];
        setOpenkey(lastOpen)
        // if(lastOpen.indexOf(value[0])){
        //     setOpenkey('')
        // }else{
        //     setOpenkey(lastOpen)
        // }

    }

    useEffect(() => {
        const pathname = location.pathname;
        const value = pathname.split("/")
        var key = '/' + value[1] + "/" + value[2];
        setOpenkey(key)
        console.log(key)
    }, [])
    return (
        <div style={{ width: "100%", minHeight: '100%', height: '100vh', background: "" }}>
            <Sider
                trigger={null}
                collapsible
                collapsed={collapsed}
                style={{ width: "200px", minHeight: '100%', height: '100vh' }}
            >
                <div className="logo" style={{ width: '100%', padding: 20, marginTop: 20 }}>
                    <img style={{ width: '100%', display: !collapsed ? 'block' : 'none' }} src={require('../../assets/images/logo.png').default} alt="" className="logo" />

                    {/* https://www.mercedes-benz.com.cn/content/dam/mb-cn/renovation/logo-mobile.png */}
                </div>
                <Menu

                    defaultSelectedKeys={[location.pathname]}
                    // defaultOpenKeys={key}
                    defaultOpenKeys={[location.pathname.split("/").splice(0, 3).join("/")]}
                    mode="inline"
                    theme="dark"
                    onClick={handleItemClick}
                >
                    {/* openKeys={[openkey]} 
                    onOpenChange={onOpenChange} */}
                    {renderMenuItem(routerList)}
                </Menu>

            </Sider>
        </div>

    )
}

export default connect(
    state => ({
        collapsed: state.getIn(['data', 'collapsed'])
    })
)(withRouter(observer(MyMenu)))